<template>
  <el-dialog :show-close="false" :title="title" :visible="setRoleVisible" destroy-on-close>
    <el-form ref="setRoleForm" :model="form" :rules="rules">
      <el-form-item :label-width="formLabelWidth" label="角色名称:" prop="roleName">
        <el-input v-model="form.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="角色描述:">
        <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="remove">取 消</el-button>
      <el-button type="primary" @click="setRole">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRole, postRole, putRole } from '@/api/role'

export default {
  created () {
  },
  name: 'setRole',
  props: ['setRoleVisible', 'title', 'id'],
  data () {
    return {
      form: {
        roleName: '',
        roleDesc: ''
      },
      formLabelWidth: '90px',
      rules: {
        roleName: [
          {
            required: true,
            min: 1,
            message: '请输入用户名称',
            trigger: 'blur'
          }, {
            min: 2,
            max: 7,
            message: '长度在 2 到 7 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    remove () {
      this.$emit('update:id', '')
      this.$emit('update:setRoleVisible', false)
      this.form.roleName = ''
      this.form.roleDesc = ''
    },
    async setRole () {
      await this.$refs.setRoleForm.validate(async (valid) => {
        if (valid) {
          if (this.id === '') {
            // 添加角色
            try {
              const res = await postRole(this.form)
              if (res.meta.status === 201) {
                this.$message({
                  message: res.meta.msg,
                  type: 'success'
                })
                // 调用方法刷新列表
                this.$emit('getRoleList')
              } else {
                this.$message.error(res.meta.msg)
              }
            } catch {
              this.$message.error('添加角色失败')
            }
            // 调用方法关闭窗口
            this.$emit('update:setRoleVisible', false)
          } else {
            // 编辑角色
            await this.putRole()
          }
        }
      })
    },
    // 编辑角色
    async putRole () {
      try {
        const res = await putRole(this.id, this.form)
        // console.log(res.data)
        if (res.meta.status === 200) {
          this.$message({
            message: res.meta.msg,
            type: 'success'
          })
          // 调用方法刷新列表
          this.$emit('getRoleList')
        } else {
          this.$message.error(res.meta.msg)
        }
      } catch {
        this.$message.error('角色编辑失败')
      }
      // 调用方法关闭窗口
      this.$emit('update:setRoleVisible', false)
      this.$emit('update:id', '')
    }
  },
  watch: {
    id (value) {
      console.log(value)
      if (value === '') return
      getRole(value).then(res => {
        this.$emit('update:setRoleVisible', true)
        this.form.roleName = res.data.roleName
        this.form.roleDesc = res.data.roleDesc
      }).catch(() => {
        this.$emit('update:id', '')
      })
    }
  }
}
</script>

<style scoped>

</style>
